<template>
  <div>
    <n-card>
      <n-space style="margin-bottom: 10px">
        <!--        <n-radio-group v-model:value="searchForm.bizOption" size="medium" @change="getPromptList">-->
        <!--          <n-radio-button-->
        <!--              v-for="biz in bizOptions"-->
        <!--              :key="biz.value"-->
        <!--              :value="biz.value"-->

        <!--          >-->
        <!--            {{ biz.label }}-->
        <!--          </n-radio-button>-->
        <!--        </n-radio-group>-->
<!--        <n-select v-if="searchForm.bizOption=='2'" :options="tagList" style="width:300px;"-->
<!--                  v-model:value="searchForm.tags" placeholder="请选择提示词类型"-->
<!--                  clearable></n-select>-->
        <n-input v-model:value="searchForm.title" placeholder="请输入提示词标题" style="width: 300px">
        </n-input>
        <n-button type="primary" @click="getPromptList">查询</n-button>
      </n-space>
    </n-card>
    <n-card style="margin-top: 5px">
      <n-button type="primary" style="margin-bottom: 10px;"
                @click="resetForm() ;formTitle = '新增提示词'; addModalShow = true">
        <template #icon>
          <n-icon>
            <AddSharp/>
          </n-icon>
        </template>
        新增
      </n-button>

      <n-data-table
          :columns="columns"
          :data="promptList"
          :loading="tableLoading"
          :style="{ height: `${clientHeight - (layoutHeaderHeight  + tabsHeight + 225)}px` }"
          flex-height
      >
      </n-data-table>
      <n-space justify="end" style="margin-top: 10px">
        <n-pagination
            :display-order="['quick-jumper', 'pages', 'size-picker']"
            :item-count="tableTotal"
            :page-size="paginationReactive.pageSize"
            :page-sizes="paginationReactive.pageSizes"
            show-quick-jumper
            show-size-picker
            :on-update:page-size="onPageSizeChange"
            :on-update:page="onPageChange"
        />
      </n-space>
    </n-card>

    <n-drawer
        v-model:show="addModalShow"
        preset="card"
        class="custom-card"
        :bordered="false"
        style="width:600px"
        :title="formTitle"
    >

      <n-drawer-content>
        <template #header>
          {{formTitle}}
        </template>

        <n-grid :x-gap="20">
          <n-grid-item :span="24">
            <n-form ref="formRef" :model="promptForm" label-placement="left" label-width="60" label-align="left">
              <n-form-item
                  label="标题"
                  path="promptTitle"
              >
                <n-input v-model:value="promptForm.promptTitle" clearable/>
              </n-form-item>
              <n-form-item
                  label="提示词分类"
                  path="templateCode">
                <n-select
                    :options="bizOptions"
                    v-model:value="promptForm.templateCode">
                </n-select>
              </n-form-item>

              <n-form-item
                  label="适用大模型"
                  path="">
                <n-select
                    :options="llmTypeOptions"
                    v-model:value="promptForm.llmType">
                </n-select>
              </n-form-item>

              <n-form-item label="设置">
                <n-row>
                  <n-col :span="12">
                    <n-input-number v-model:value="promptForm.temperature" :min="0" :max="2" :show-button="false">
                      <template #prefix>
                        <span>多样性  :</span>
                      </template>
                    </n-input-number>
                  </n-col>
                  <n-col :span="12" style="padding-left: 5px">
                    <n-input-number v-model:value="promptForm.topP" :min="0" :max="1" :show-button="false">
                      <template #prefix>
                        <span>采样范围  :</span>
                      </template>
                    </n-input-number>
                  </n-col>
                </n-row>
              </n-form-item>
              <n-form-item label=" ">
                <n-row>
                  <n-col :span="12">
                    <n-input-number v-model:value="promptForm.frequencyPenalty" :min="-2" :max="2" :show-button="false">
                      <template #prefix>
                        <span>重复控制  :</span>
                      </template>
                    </n-input-number>
                  </n-col>
                  <n-col :span="12" style="padding-left: 5px">
                    <n-input-number v-model:value="promptForm.presencePenalty" :min="-2" :max="2" :show-button="false">
                      <template #prefix>
                        <span>词汇控制  :</span>
                      </template>
                    </n-input-number>
                  </n-col>
                </n-row>
              </n-form-item>

              <n-form-item label=" " v-if="promptForm.templateCode!=''">
                <n-alert type="info" title="提示词内置参数">

                  <n-text v-if="promptForm.templateCode==='custom_keyword'" v-html="custom_keyword_params">
                  </n-text>
                  <n-text v-else v-html="other_params"></n-text>
                </n-alert>
              </n-form-item>


              <n-form-item
                  label="提示词"
                  path="promptContent">
                <n-input style="height: 250px;" v-model:value="promptForm.promptContent" type="textarea" clearable/>
              </n-form-item>

              <n-form-item
                  label="说明"
                  path="promptRemark">
                <n-input v-model:value="promptForm.promptRemark" type="textarea" clearable/>
              </n-form-item>

            </n-form>
          </n-grid-item>
        </n-grid>

        <template #footer>
          <n-space justify="end">
            <n-button @click="addModalShow=false">取消</n-button>
            <n-button type="primary" :loading="formLoading" @click="savePrompt">提交</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts" setup>
import {h, onMounted, reactive, ref} from 'vue'
import {promptControllerApi} from '@/api/prompt/prompt.api'
import {NButton, NTag} from "naive-ui"
import {storeToRefs} from "pinia"
import {useSystemStore} from "@/store/modules/useSystemStore"
import {AddSharp} from "@vicons/ionicons5"


const {
  clientHeight,
  layoutHeaderHeight,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());
const promptList = ref([])
const searchForm = ref({
  title: '',
  tags: null,
  bizOption: '1'
})
const addModalShow = ref(false)
const formLoading = ref(false)
const formTitle = ref('新增提示词')

const bizOptions = [
  {
    label: '关键词推导',
    value: 'custom_keyword',
    num: 1
  }, {
    label: '文本总结',
    value: 'custom_summary',
    num: 1
  }, {
    label: '人物提取',
    value: 'custom_extract_character',
    num: 1
  },{
    label: '文案改写',
    value: 'custom_rewrite',
    num: 1
  }, {
    label: '同义词改写',
    value: 'synonymRewrite',
  },{
    label: '场景提取',
    value: 'custom_extract_scene',
    }]

const llmTypeOptions =  [
  {
    label: '本地大模型',
    value: 'local'
  }, {
    label: '商用云服务大模型(ChatGPT,KIMI等)',
    value: 'cloud'
  },{
    label: '全部',
    value: 'all'
  }]

const custom_keyword_params = ref("<li>{{content}}   : 需要推理的分镜内容 </li>  <li>{{storyContent}} : 全文内容</li> <li>{{summary}} ：总结文本 </li>")
const other_params = ref("<li>{{content}}   : 需要推理的文本</li>")


const promptForm = ref({
  id: '',
  promptTitle: '',
  promptContent: '',
  promptDescription: '',
  promptRemark: '',
  tags: 'custom',
  templateCode: '',
  topP: 0.85,
  temperature: 0.5,
  presencePenalty: 0.2,
  frequencyPenalty: 0.3,
  llmType:'cloud'
})

const resetForm = () => {
  promptForm.value = {
    id: '',
    promptTitle: '',
    promptContent: '',
    promptDescription: '',
    promptRemark: '',
    tags: 'custom',
    templateCode: '',
    topP: 0.85,
    temperature: 0.5,
    presencePenalty: 0.2,
    frequencyPenalty: 0.3,
    llmType:'cloud'
  }
}

const tableLoading = ref(false)

const tableTotal = ref(0)

const paginationReactive = reactive({
  page: 1,
  pageSize: 20,
  pageSizes: [10, 20, 50]
})


const onPageChange = (page: number) => {
  paginationReactive.page = page
  getPromptList()
}
const onPageSizeChange = (pageSize: number) => {
  paginationReactive.pageSize = pageSize
  getPromptList()

}

const getPromptList = () => {
  tableLoading.value = true
  const data = {
    title: searchForm.value.title,
    bizOption: searchForm.value.bizOption
  }
  promptControllerApi.getGptPrompt(data, {
    page: 1,
    pageSize: 20
  }).then((res) => {
    if (res.code === 200) {
      promptList.value = res.data.list
      const key = ref(0)
      promptList.value.forEach((item) => {
        item.key = key.value
        key.value = key.value + 1
      })
      tableTotal.value = res.data.count
    }
  }).finally(() => {
    tableLoading.value = false
  })
}

onMounted(() => {
  getPromptList()
})

const columns = [
  {
    title: '序号',
    key: 'key',
    width: 80
  },
  {
    title: '标题',
    key: 'promptTitle'
  },
  {
    title: '适用大模型',
    key: 'llmType',
    render(row:any){
      if (row.llmType === null || row.llmType === ''){
        return '全部'
      }else {
        const llmOption = llmTypeOptions.find((item) => item.value === row.llmType)
        return llmOption?.label
      }
    }
  },
  {
    title: '类型',
    key: 'templateCode',
    render(rowData: any) {
      const bizOption = bizOptions.find((item) => item.value === rowData.templateCode)
      console.log(bizOption?.label)
      if (bizOption){
        return [h(NTag, {type: 'info'}, {default: () => bizOption?.label})]
      }
      return rowData.templateCode
    }
  },
  {
    title: '指标设置',
    width: 500,
    render(rowData: any) {
      return [h(NTag, {type: 'info',style: 'margin-left:2px'}, {default: () => '惩罚因子:' + rowData.frequencyPenalty}),
        h(NTag, {type: 'info',style: 'margin-left:2px'}, {default: () => '重复度:' + rowData.presencePenalty}),
        h(NTag, {type: 'info',style: 'margin-left:2px'}, {default: () => '采样温度:' + rowData.temperature}),
        h(NTag, {type: 'info',style: 'margin-left:2px'}, {default: () => '核采样:' + rowData.topP})];
    }
  },
  {
    title: '操作',
    key: 'address',
    render(rowData: any) {
      return [h(
          NButton,
          {
            type: 'info',
            size: 'small',
            onClick: () => {
              // if(rowData.promptType ==='system'){
              //   window.$message.info( '系统提示词不允许修改')
              //   return
              // }
              promptForm.value = rowData
              formTitle.value = '编辑提示词'
              addModalShow.value = true
            }
          },
          {default: () => '编辑'}
      ), h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            style: 'margin-left: 5px',
            onClick: () => {
              if(rowData.promptType ==='system'){
                window.$message.info( '系统提示词不允许删除')
                return
              }
              window.$dialog.warning({
                title: "温馨提醒",
                content: "是否继续删该提示词?",
                positiveText: "确定",
                negativeText: "取消",
                onPositiveClick: () => {
                  promptControllerApi.deleteGptPrompt(rowData.id).then((res) => {
                    if (res.code === 200) {
                      getPromptList()
                    }
                  })
                }
              })
            }
          },
          {default: () => '删除'}
      )]
    }
  }
]


const savePrompt = () => {
  formLoading.value = true
  if (promptForm.value.id) {
    promptControllerApi.updateGptPrompt(promptForm.value).then((res) => {
      if (res.code === 200) {
        getPromptList()
        addModalShow.value = false
      }
    }).finally(() => {
      formLoading.value = false
    })
    return
  }else {
    promptControllerApi.saveGptPrompt(promptForm.value).then((res) => {
      if (res.code === 200) {
        getPromptList()
        addModalShow.value = false
      }
    }).finally(() => {
      formLoading.value = false
    })
  }
}

</script>
